<template>
  <div>
    <div style="padding:20px;font-size:20px">请先验证您的手机</div>
    <div style="padding:20px">
      <van-cell-group>
        <van-field
          v-model="phone"
          label="手机号"
          placeholder="请输入手机号"
          @blur="checkPhone"
          :v-model="phone"
        />
        <van-field
          v-model="code"
          @blur="checkCode"
          center
          clearable
          label="短信验证码"
          placeholder="请输入短信验证码"
        >
          <van-button
            slot="button"
            :disabled="isDisabled"
            size="small"
            type="primary"
            @click="sendCode"
          >{{codeMsg}}</van-button>
        </van-field>
      </van-cell-group>
    </div>
    <div style="padding:20px;font-size:14px">
      <van-checkbox v-model="checked" shape="square">
        我已阅读并同意对的人
        <span>用户协议</span>和
        <span>隐私声明</span>
      </van-checkbox>
    </div>
    <div
      v-if="isShow"
      @click="bindPhone"
      style="display:flex;justify-content: flex-end;align-items:center;padding:20px;color:orangered"
    >确定</div>
    <router-link to="/detailGroup" v-else>
      <div
        style="display:flex;justify-content: flex-end;align-items:center;padding:20px;color:orangered"
      >下一步
        <van-icon name="arrow"/>
      </div>
    </router-link>
  </div>
</template>

<script>
let count = 60;
let t;
export default {
  data() {
    return {
      phone: "",
      code: "",
      isPhone: false,
      isCode: false,
      codeMsg: "发送验证码",
      isDisabled: false,
      checked: true,
      openId: "",
      isShow: ""
    };
  },
  created: function() {
    this.openId = localStorage.getItem("openId");
    console.log(this.openId);
    if (this.$route.query.id) this.isShow = false;
    else this.isShow = true;
  },
  methods: {
    //验证手机号
    checkPhone: function() {
      var phone = this.phone.replace(/\s/g, "");
      console.log(phone);
      var phoneReg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9]|17[0|1|2|3|5|6|7|8|9])\d{8}$/;
      if (phone.length === 0) {
        this.$toast("手机号不能为空~");
        this.isPhone = false;
      } else if (phone.length < 11) {
        this.$toast("手机号长度有误~");
        this.isPhone = false;
      } else if (!phoneReg.test(phone)) {
        this.$toast("手机号格式输入错误~");
        this.isPhone = false;
      } else {
        this.isPhone = true;
      }
    },
    // 获取验证码
    sendCode: function() {
      var that = this;
      if (this.isPhone === true) {
        this.$http
          .get("/app/login/sendSmsCode", {
            params: {
              phone: that.phone
            }
          })
          .then(res => {
            if (res.data == "发送成功") {
              t = setInterval(function() {
                if (count == 0) {
                  clearInterval(t);
                  that.codeMsg = "获取验证码";
                  that.isDisabled = false;
                  count = 60;
                } else {
                  count--;
                  console.log(count);
                  that.codeMsg = count + "秒";
                  that.isDisabled = true;
                }
              }, 1000);
            }
          });
      } else {
        this.$toast("请输入正确手机号");
      }
    },
    // 验证 验证码
    checkCode: function() {
      var code = this.code.replace(/\s/g, "");
      if (code.length === 0) {
        this.$toast("验证码不能为空~");
        this.isCode = false;
      } else if (code.length < 4) {
        this.$toast("验证码长度有误~");
        this.isCode = false;
      } else {
        this.isCode = true;
      }
    },
    // 确认绑定手机
    bindPhone: function() {
      var that = this;
      if (this.isPhone && this.isCode) {
        var obj = JSON.stringify({});
        this.$http
          .put("/app/login/bindingPhone", {
            openId: that.openId,
            phone: that.phone,
            smsCode: that.code
          })
          .then(res => {
            console.log(res);
            alert("绑定手机"+res.data.phone)
            clearInterval(t);

            this.$toast("手机绑定成功");

            //判断跳转到哪一页

            setTimeout(()=>{
                let type = this.$route.query.type;
                if(type === 'center') this.$router.push({path:"/detailGroup"})
                else this.$router.back(-1)
            },2000)

          });
      }else{
        this.checkPhone();
        this.checkCode()
      }
    }
  }
};
</script>

<style scoped>

</style>
